<template lang="html">
  <div class="all">


<div class="swiper">
  <div class="load" v-if=" loading == false">
     <IndexLoad></IndexLoad>

   </div>



</div>
<div class="load" v-if ="loading == true">


  <div class="f">

  </div>
   <div class="top" >
    <p class="y_date">
                  <span>{{year}}</span>
                  <span> / </span>
                  <span>{{month}}</span>
                  <span> / </span>
                  <span>{{sss}}</span>


    </p>
      <span class="icon-search"  @click="sear()"></span>
    <p>
      <span>地球  </span>
      <span> 对流层   </span>
      <span> -275℃</span>
    </p>
   </div>
   <pull-to :top-load-method="refresh">

   <swiper :options="swiperOption" ref="mySwiper" class="swiper-slide">
     <swiper-slide>
       <Top :obj="data1">
     </Top></swiper-slide>
     <swiper-slide><Second :obj="data2">
     </Second></swiper-slide>
     <swiper-slide><Three :obj = "data3">
     </Three></swiper-slide>
     <swiper-slide><Four :obj = "data4"></Four></swiper-slide>
     <swiper-slide><Five :obj = "data5"></Five></swiper-slide>
     <swiper-slide><Six :obj ="data6"></Six></swiper-slide>
     <swiper-slide><Seven :obj ="data7"></Seven></swiper-slide>
     <swiper-slide><Eight :obj = "data8"></Eight></swiper-slide>
     <swiper-slide><Nine :obj = "data9"></Nine></swiper-slide>
     <swiper-slide><Ten :obj = "dataten"></Ten></swiper-slide>
<<<<<<< HEAD

     <div class="swiper-pagination"  slot="pagination"></div>
     <div class="swiper-button-prev" slot="button-prev"></div>
     <div class="swiper-button-next" slot="button-next"></div>
     <div class="swiper-scrollbar"   slot="scrollbar"></div>
   </swiper>
</pull-to>
=======
>>>>>>> 7bfd43d3829a9c616619a2431c9c0daef115b5b7

     <div class="swiper-pagination"  slot="pagination"></div>
     <div class="swiper-button-prev" slot="button-prev"></div>
     <div class="swiper-button-next" slot="button-next"></div>
     <div class="swiper-scrollbar"   slot="scrollbar"></div>
   </swiper>
</pull-to>



    <!--  -->
</div>
 <Navb></Navb>
</div>
</template>

<script>
import Top from './top'
import Second from './second'
import Three from './three'
import Four from './four'
import Five from './five'
import Six from './six'
import Seven from './seven'
import  Eight from './eight'
import Nine from './nine'
import Ten from './ten'
import Nav from '../all/navbar'
 import PullTo from 'vue-pull-to'
 import IndexLoad from './indexload'
 import Navb from '../all/navbar'


export default {
  data() {
    return {
      datat:[],
      data1:[],
      data2:[],
      data3:[],
      data4:[],
      data5:[],
      data6:[],
      data7:[],
      data8:[],
      data9:[],

      dataten:[],
      pageInd:'',
      year:'',
      month:'',
      day:'',
      sss:'',
      loading:false,
      swiperOption:{//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        notNextTick: true,
        grabCursor : true,
        setWrapperSize :true,
        autoHeight: true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
       observeParents:false,//修改swiper的父元素时，自动初始化swiper


        onSlideChangeEnd: (swiper)=> {
          swiper.update();
          this.pageInd = swiper.activeIndex
          this.sss=this.day-this.pageInd
          if(this.sss<10){
            this.sss='0'+this.sss
          }

          // console.log(swiper.activeIndex);
          console.log(this.pageInd);

                    }  ,
        prevButton:'.swiper-button-prev',//上一张
        nextButton:'.swiper-button-next',//下一张
        scrollbar:'.swiper-scrollbar',//滚动条

      }
    }
  },
    created () {
      const year = new Date().getFullYear();
       const month = new Date().getMonth() + 1;
       const day = new Date().getDate();
       this.year = year
       this.month = month
       this.day = day
       this.sss = this.day

      this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/idlist/?channel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((responsen) => {
        responsen = responsen.body;
        this.datat = responsen.data;
        console.log(this.datat);
// 第一次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[0]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data1 = response.body.data;
              console.log(this.data1);
              this.loading = true;
              // this.y_date = this.data1.date;
              // console.log(this.y_date);

            });
// 第二次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[1]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data2 = response.body.data;
              console.log(this.data2);
              this.loading = true;

            });
// 第三次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[2]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data3 = response.body.data;
              console.log(this.data3);
              this.loading = true;

            });
// 第四次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[3]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data4 = response.body.data;
              console.log(this.data4);
              this.loading = true;

            });
// 第五次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[4]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data5 = response.body.data;
              console.log(this.data5);
              this.loading = true;

            });

// 第六次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[5]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data6 = response.body.data;
              console.log(this.data6);
              this.loading = true;

            });
// 第七次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[6]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data7 = response.body.data;
              console.log(this.data7);
              this.loading = true;

            });
// 第八次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[7]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data8 = response.body.data;
              console.log(this.data8);
              this.loading = true;

            });
// 第九次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[8]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.data9 = response.body.data;
              console.log(this.data9);
              this.loading = true;

            });
// 第十次请求
       this.$http.get('http://v3.wufazhuce.com:8000/api/onelist/'+ this.datat[9]+' /0?cchannel=wdj&version=4.0.2&uuid=ffffffff-a90e-706a-63f7-ccf973aae5ee&platform=android').then((response) =>{
              this.dataten = response.body.data;
              console.log(this.dataten);
              this.loading = true;

            });


          });
    },

    methods:{
      // 下拉刷新
      refresh(loaded){
        // setTimeout(()=>{
        //  loaded('done');
        //  },2000)
         loaded('done');
         location.reload(true);
       },
       sear(){
         this.$router.push({
           path:'/search'
         })

       }
       },


     components:{
      //  First,
       Top,
       Second,
       Three,
       Four,
       Five,
       Six,
       Seven,
       Eight,
       Nine,
       Ten,
       PullTo,
       IndexLoad,
       Navb
      //  Dat
     }

}
</script>

<style scoped  lang="css">
.tab{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 6rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: pink;
    z-index: 800;
}
.f{
  height: 6rem;
}
.top{
  width:100%;
  height: 6rem;
  background: rgba(255, 255, 255, 1);
  position: fixed;
  top:0;
  z-index:222;

}

.top .y_date{
  display: inline-block;
  width:90s%;
 height: 2.6rem;
 text-align: center;
 font-size: 3rem;
 padding: 1rem  2rem  0.2rem 0 ;
}
.swiper-slide{
  float: left;
  height: auto;
}
.swiper-wrapper{
  position: relative;
  height: auto;
}
.swiper-container{
  width: 100%;
  height: auto;
 }

 .top .icon-search:before{
  display: inline-block;

  font-size: 2rem;
  content: "\e90a";

}
.swiper-slide{
  float: left;
  height: auto;
}
.swiper-wrapper{
  position: relative;
  height: auto;
}
.swiper-container{
  width: 100%;
  height: auto;
 }



</style>
